<template>
	<view class="container">
		<block>



			<view v-if="mylist.isCertified==1">
				<view class="flexb" style="padding:160rpx 15% 50rpx">
					<!-- <image src="https://sdejf.didamaicai.com/img/renzheng (1).jpg" style="" mode="aspectFit"></image> -->
				</view>

				<view class="success">

					<view class="u-m-t-30 u-font-40"
						style="font-size: 18px;font-weight: 700;text-align: center;width: 750rpx;">
						<text style="color: #02ab80;">恭喜您, 已认证成功</text>
					</view>
					<view class="u-m-t-30" style="width: 60vw;color: #aaa;">

					</view>
				</view>
				<view class="foot">

					<navigator url="/pages/my/my" open-type="switchTab"
						style="margin: 40rpx 6% 0;background: linear-gradient(to right, #5a9efe 0, #4e97fe 100%) !important;padding: 25rpx 0;text-align: center;border-radius: 30px;color: #fff;font-weight: 550;font-size: 16px;">
						确 认</navigator>


				</view>
			</view>



			<view v-else>


				<view class="contentbox" v-if="shoudongflag">
					<view class="applytj">
						<view class="f1" style="justify-content: center;">
							<text
								style="font-size: 18px;font-weight: 600;text-align: center;">{{mylist.isCertified==0?'未认证':'已认证'}}
							</text>
							<!-- <text class="t2">申请条件：</text> -->
						</view>
						<view class="f2">

							<view class="t4">请填写申请资料</view>
						</view>
					</view>
					<view class="applydata">

						<view class="form-item">
							<view class="label">证件类型
							</view>

							<view class="">
								身份证
							</view>



						</view>
						<view class="form-item">
							<view class="label">真实姓名<text style="color:red"> *</text>
							</view>

							<input type="text" v-model="shimingfrom.name" class="input" placeholder="请填写真实姓名"
								placeholder-style="font-size:28rpx" />



						</view>
						<!-- 	<view class="form-item">
							<view class="label">手机号码<text style="color:red"> *</text>
							</view>

							<input type="text" v-model="shimingfrom.phone" class="input" placeholder="请填写手机号码"
								placeholder-style="font-size:28rpx" />



						</view> -->
						<view class="form-item">
							<view class="label">身份证号码<text style="color:red"> *</text>
							</view>

							<input type="text" v-model="shimingfrom.number" class="input" placeholder="请填写身份证号码"
								placeholder-style="font-size:28rpx" />



						</view>
						<view class="form-item">
							<view class="label">民族
							</view>

							<input type="text" v-model="shimingfrom.nation" class="input" placeholder="请填写民族"
								placeholder-style="font-size:28rpx" />



						</view>
						<view class="form-item">
							<view class="label">出生
							</view>

							<input type="text" v-model="shimingfrom.year" class="input"
								placeholder-style="font-size:28rpx" />
							<text style="margin: 0 12upx;">年</text>
							<input type="text" v-model="shimingfrom.month" class="input"
								placeholder-style="font-size:28rpx" /><text style="margin: 0 12upx;">月</text>
							<input type="text" v-model="shimingfrom.day" class="input"
								placeholder-style="font-size:28rpx" /><text style="margin: 0 12upx;">日</text>



						</view>
						<view class="form-item">
							<view class="label">地址
							</view>

							<input type="text" v-model="shimingfrom.address" class="input" placeholder="请填写身份证地址"
								placeholder-style="font-size:28rpx" />



						</view>
						<!-- <view class="form-item">
							<view class="label">身份证正面<text style="color:red"> *</text>
							</view> -->

						<!-- <uni-file-picker limit="1"></uni-file-picker> -->
						<!-- <input type="text" style="display:none" /> -->
						<!-- <view class="flex" style="flex-wrap:wrap;padding-top:20rpx"> -->
						<!-- 	<view class="form-imgbox">
									<view class="form-imgbox-img">
										<image class="image" mode="widthFix" />
									</view>
								</view> -->
						<!-- <view class="form-uploadbtn"
									style="background: url(https://zuche2.ji00.cc/static/img/shaitu_icon.png) 26px center / 41px 41px no-repeat rgb(243, 243, 243);">
								</view> -->
						<!-- </view> -->
						<!-- </view> -->
						<!-- <view class="form-item">
							<view class="label">拍照输入<text style="color:red"> *</text>
							</view>

							<image style="width: 500upx;height: 300upx;" @click="chooseAndUploadImage"
								src="/static/images/R-C.png" mode=""></image>



						</view> -->

					</view>
					<!-- <button class="form-btn" form-type="submit" v-if="selectedLevel.applytj_reach==1">申请成为{{selectedLevel.name}}</button> -->
					<!-- <button class="form-btn" form-type="submit">实名认证</button> -->

					<button class="form-btn" @click="submit">开始认证</button>

				</view>


				<view class="contentbox" v-else>
					<view class="backcolor-white">
						<view class="sfzbg" @click="chooseAndUploadImage">
							<image src="../../static/images/2069e0bfa3ff14adc42d47a57d7b23d.png" mode=""></image>
							<view class="h2">
								点击拍摄身份证
							</view>
							<view class="sfzabs">
								身份证
							</view>
						</view>
						<view class="paishouyaoqiu">
							<view class="yoaqiu">
								拍摄要求
							</view>
							<view class="item">
								<text></text>垂直拍摄，证件边框完整
							</view>
							<view class="item">
								<text></text>避免证件反光，模糊
							</view>
						</view>
					</view>

					<view class="backcolor-white">
						<button @click="chooseAndUploadImage"
							style="background-color: #5a9efe;color: #fff;margin-bottom: 40upx;">开始识别</button>
						<button @tap="shoudongflag=true" style="">手动输入</button>
					</view>
				</view>
			</view>


		</block>

		<!-- <view style="display:none">{{test}}</view>
		<block v-if="errmsg!='' && isload">
			<view class="zan-box">
				<image src="/static/img/zan.png" class="zan-img"></image>
				<view class="zan-text">{{errmsg}}</view>
			</view>
		</block> -->
		<loading v-if="loading"></loading>
		<!-- <dp-tabbar :opt="opt"></dp-tabbar> -->
	</view>
</template>

<script>
import {getwechatuserlist} from '@/utils/new_file.js'
import {sha256} from 'js-sha256';
import {pathToBase64} from 'image-tools';
import {uploadIdCardAppId, uploadIdCardSppSecret} from "@/utils/config";
import {editWechat} from "@/utils/api/basics";

var app = getApp()
	var appId = 'D0VQ1IFPq53LKKv7';
	var appSecret = 'D0VQ1IFPq53LKKv7qhDaMeDF03FwtPO4'
	export default {
		data() {
			return {
				shoudongflag: false,
				// shibieflag: false,
				shimingfrom: {},
				mylist: {}
			}
		},
		created() {
			this.wechatuserlistfun()
		},
		methods: {
			 wechatuserlistfun() {
				let openid = uni.getStorageSync('useinfo').openid
				 getwechatuserlist(openid).then(data=>{
					this.mylist = data.data.rows[0]
				uni.setStorageSync('useinfo', this.mylist)
				console.log(this.mylist);
				})
				
			},
			chooseAndUploadImage() {
				// 身份证识别
				app.showLoading('识别中')
				let what = this
				let timestamp = Date.now();
        let sign = sha256(uploadIdCardAppId + uploadIdCardSppSecret + timestamp)
        console.log(uploadIdCardAppId, uploadIdCardSppSecret, sign, timestamp);
				uni.chooseImage({
					count: 1, // 选择的图片数量
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// 图片转化为base64格式
						pathToBase64(tempFilePaths[0]).then(data => {
							console.log(data);
							uni.request({
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								url: 'https://api.jumdata.com/ocr/idcard-v1',
								method: 'POST',
								data: {
                  appId: uploadIdCardAppId,
									base64: data,
									timestamp: timestamp,
									sign: sign
								},
								success: function(res) {
									what.shimingfrom = res.data.data.info
									if (what.shimingfrom) {
										what.shoudongflag = true
										uni.showToast({
											title: '识别成功'
										})
										console.log(what.shimingfrom);
									} else {
										uni.showToast({
											title: '识别失败',
											icon: 'error'
										})
									}

								},
								fail(err) {
									console.log(err);
								}
							})
						})
					}
				});
			},
      uploadInfo() {
        let useinfo = uni.getStorageInfo('useinfo')
        useinfo.userName = this.shimingfrom.name
        useinfo.idCard = this.shimingfrom.number
        useinfo.isCertified = 1
        editWechat(useinfo).then(res => {
          if (res.data.code == 200) {
            console.log(res)
          }
        })
      }
      ,
			submit() {
        this.uploadInfo()
				// 人脸配对
        // app.showLoading('识别中')
        // let what = this
        // let timestamp = Date.now();
        // let sign = sha256(appId + appSecret + timestamp)
        // console.log(appId, appSecret, sign, timestamp);
        // uni.chooseImage({
        // 	count: 1, // 选择的图片数量
        // 	sourceType: ['camera'],
        // 	success: (chooseImageRes) => {
        // 		const tempFilePaths = chooseImageRes.tempFilePaths;
        // 		// 图片转化为base64格式
        // 		pathToBase64(tempFilePaths[0]).then(data => {
        // 			console.log(data);
        // 			uni.request({
        // 				header: {
        // 					'Content-Type': 'application/x-www-form-urlencoded'
        // 				},
        // 				url: 'https://api.jumdata.com/face-idcard/compare',
        // 				method: 'POST',
        // 				data: {
        // 					appId: appId,
        // 					timestamp: timestamp,
        // 					sign: sign,
        // 					name: this.shimingfrom.name,
        // 					idcard: this.shimingfrom.number,
        // 					image: data
        // 				},
        // 				success: async function(res) {
        // 					// var formData = new FormData();
        // 					// formData.append(tempFilePaths);
        // 					console.log(res.data.data);
        // 					if (res.data.data.msg == "系统判断为同一人") {
        // 						uni.uploadFile({
        // 							url: 'https://zuche.mylocation.cn/prod-api/wxuser/wechatuser/upload',
        // 							filePath: tempFilePaths[0],
        // 							name: 'file',
        // 							formData: {
        // 								// 可以添加其他参数
        // 							},
        // 							success: async function(uploadRes) {
        // 								// 上传成功后的处理逻辑
        //
        // 								console.log(uploadRes);
        // 								let mylists = what.mylist
        // 								mylists.headimg = JSON.parse(
        // 									uploadRes.data).url
        // 								mylists.isCertified = 1
        // 								let putdata =
        // 									await putwxuserwechatuser(
        // 										mylists)
        // 								what.wechatuserlistfun()
        // 								uni.showToast({
        // 									title: '认证成功'
        // 								})
        // 								uni.navigateBack()
        // 							},
        // 							fail: function(uploadError) {
        // 								// 上传失败后的处理逻辑
        // 								console.log(uploadError);
        // 							}
        // 						});
        // 						// let renlai = await getcommonupload()
        // 					} else {
        // 						if (res.data.code == 400) {
        // 							uni.showToast({
        // 								title: res.data.msg,
        // 								icon: 'none'
        // 							})
        // 						} else {
        // 							uni.showToast({
        // 								title: res.data.data.msg,
        // 								icon: 'none'
        // 							})
        // 						}
        //
        // 					}
        // 				}
        // 			})
        // 		})
        //
        //
        // 	}
        // });
			}
		}

	}
</script>
<style>
	page {
		background: #f6f6f6;
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: auto;
		min-height: 100%;
		padding-bottom: 20rpx;
	}

	.banner {
		width: 100%;
		background: #fff;
		height: 400rpx;
		display: table
	}

	.contentbox {

		display: flex;
		flex-direction: column;

	}

	.title {
		height: 50rpx;
		line-height: 50rpx
	}

	.user-level {
		margin-left: 10rpx;
		display: flex;
	}

	.user-level image {
		width: 44rpx;
		height: 44rpx;
		margin-right: 10rpx;
		margin-left: -4rpx;
	}

	.level-name {
		height: 36rpx;
		border-radius: 18rpx;
		font-size: 24rpx;
		color: #fff;
		background-color: #5c5652;
		padding: 0 16rpx 0 0;
		display: flex;
		align-items: flex-end;
	}

	.level-name .name {
		display: flex;
		align-items: center;
		height: 100%
	}

	.noup {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: green
	}

	.form-item1 {
		width: 100%;
		display: flex;
		flex-direction: column;
		color: #333
	}

	.form-item1 .panel {
		width: 100%;
		font-size: 32rpx;
		color: #B17D2D;
	}

	.form-item1 radio-group {
		width: 100%;
		background: #fff;
		padding-left: 10rpx;
	}

	.form-item1 .radio-item {
		display: flex;
		width: 100%;
		color: #000;
		align-items: center;
		background: #fff;
		padding: 12rpx 0;
	}

	.form-item1 .radio-item:last-child {
		border: 0
	}

	.radio-item .user-level {
		flex: 1
	}

	.form-item1 radio {
		transform: scale(0.8);
	}

	.applytj {
		width: 100%;
	}

	.applytj .f1 {
		color: #000;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center
	}

	.applytj .f1 .t2 {
		padding-left: 10rpx
	}

	.applytj .f2 {
		padding: 20rpx;
		background-color: #fff;
		color: #f56060
	}

	.applytj .f2 .t2 {
		padding-top: 10rpx;
		color: #88e
	}

	.applytj .f2 .t3 {
		padding-top: 10rpx
	}

	.applytj .f2 .t4 {
		padding-top: 10rpx;
		color: green;
		font-size: 30rpx
	}

	.uplvtj {
		width: 100%;
		margin-top: 20rpx;
	}

	.uplvtj .f1 {
		color: #000;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center
	}

	.uplvtj .f1 .t2 {
		padding-left: 10rpx
	}

	.uplvtj .f2 {
		padding: 20rpx;
		background-color: #fff;
		color: #f56060
	}

	.uplvtj .f2 .t3 {
		padding-top: 10rpx;
		color: green
	}

	.explain {
		width: 100%;
		margin: 20rpx 0;
	}

	.explain .f1 {
		color: #000;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center
	}

	.explain .f1 .t2 {
		padding-left: 10rpx
	}

	.explain .f2 {
		padding: 20rpx;
		background-color: #fff;
		color: #999999
	}


	.applydata {
		width: 100%;
		background: #fff;
		padding: 0 20rpx;
		color: #333;
		font-size: 26upx;

	}

	.form-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 8rpx;
		background: #FC4343;
		color: #fff;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.applydata .radio {
		transform: scale(.7);
	}

	.applydata .checkbox {
		transform: scale(.7);
	}

	.form-item {
		width: 100%;
		border-bottom: 1px #ededed solid;
		padding: 10rpx 0px;
		display: flex;
		align-items: center;
	}

	.form-item:last-child {
		border: 0
	}

	.form-item .label {
		height: 70rpx;
		line-height: 70rpx;
		width: 160rpx;
		margin-right: 10px;
		flex-shrink: 0
	}

	.form-item .input {
		height: 70rpx;
		line-height: 70rpx;
		overflow: hidden;
		flex: 1;
		border: 1px solid #eee;
		padding: 0 8rpx;
		border-radius: 2px;
	}

	.form-item .textarea {
		height: 180rpx;
		line-height: 40rpx;
		overflow: hidden;
		flex: 1;
		border: 1px solid #eee;
		border-radius: 2px;
		padding: 8rpx
	}

	.form-item .radio {
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		align-items: center
	}

	.form-item .radio2 {
		display: flex;
		align-items: center;
	}

	.form-item .radio .myradio {
		margin-right: 10rpx;
		display: inline-block;
		border: 1px solid #aaa;
		background: #fff;
		height: 32rpx;
		width: 32rpx;
		border-radius: 50%
	}

	.form-item .checkbox {
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		align-items: center
	}

	.form-item .checkbox2 {
		display: flex;
		align-items: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.form-item .checkbox .mycheckbox {
		margin-right: 10rpx;
		display: inline-block;
		border: 1px solid #aaa;
		background: #fff;
		height: 32rpx;
		width: 32rpx;
		border-radius: 2px
	}

	.form-item .layui-form-switch {}

	.form-item .picker {
		height: 70rpx;
		line-height: 70rpx;
		flex: 1;
	}

	.form-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.form-imgbox-close {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		right: -16rpx;
		top: -16rpx;
		color: #999;
		font-size: 32rpx;
		background: #fff
	}

	.form-imgbox-close .image {
		width: 100%;
		height: 100%
	}

	.form-imgbox-img {
		display: block;
		width: 180rpx;
		height: 180rpx;
		padding: 2px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.form-imgbox-img>.image {
		max-width: 100%;
	}

	.form-imgbox-repeat {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		line-height: 28rpx;
		right: 2px;
		bottom: 2px;
		color: #999;
		font-size: 30rpx;
		background: #fff
	}

	.form-uploadbtn {
		position: relative;
		height: 180rpx;
		width: 180rpx
	}

	.apply_code {
		float: right;
		width: 100rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
		text-align: center;
		color: #fff;
	}

	.curlevel_tag {
		color: #b4b4b4;
		font-size: 24rpx;
	}

	.gradeitem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex: 1;
	}

	.form-item .gradeitem .picker {
		height: 70rpx;
		line-height: 70rpx;
		flex: unset;
	}

	.hui {
		color: #BBBBBB;
	}
</style>
<style lang="less">
	.contentbox {

		.backcolor-white {
			padding: 60rpx 40rpx;
			background-color: white;
			color: #000;
			margin-bottom: 40upx;

			.sfzbg {
				text-align: center;
				position: relative;

				.h2 {
					font-weight: 700;
					font-size: 32upx;
				}

				.sfzabs {
					position: absolute;
					left: 20%;
					top: 50%;
					font-weight: 700;
					font-size: 34upx;
					// transform: translateX(-50%);
				}
			}

			.paishouyaoqiu {
				line-height: 38upx;

				.yoaqiu {
					font-size: 32upx;
				}

				.item {
					display: flex;
					align-items: center;
					font-size: 26upx;

					text {
						margin-right: 15upx;
						background-color: red;
						border-radius: 50%;
						width: 10upx;
						height: 10upx;

					}
				}
			}

			button {
				width: 50%;
				padding: 10upx 0;
				font-size: 26upx;
			}
		}
	}
</style>